<template>
  <div
    class="data-info"
    v-loading="loading"
  >
    <div class="condition">
      <el-button
        type="primary"
        @click="addRule"
      >添加新角色</el-button>
    </div>
    <el-table :data="data">
      <el-table-column
        prop="name"
        label="唯一标识"
      />
      <el-table-column
        prop="display_name"
        label="名称"
      />
      <el-table-column
        prop="description"
        label="描述"
      />
      <el-table-column label="权限">
        <template slot-scope="{row}">
          <el-button
            type="text"
            @click="allotPermission(row)"
          >查看权限</el-button>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="{row}">
          <table-action
            :row="row"
            @editItem="updateRole"
            @deleteItem="destroy"
            :deleteProps = "deleteProps"
          ></table-action>
        </template>
      </el-table-column>
    </el-table>

  </div>
</template>

<script>
import addPage from "./components/add";
import updatePage from "./components/update";
import allotPermissionPage from "./components/permissions";
import { roleList, rolePostDel } from "@/api";
import updateVue from "./components/update.vue";
import tableAction from "@/components/table/action";
export default {
  components: { addPage, updatePage, allotPermissionPage, tableAction },
  data() {
    return {
      data: [],
      conditions: {},
      loading: false,
      deleteProps:{
        message:"确定删除该角色？"
      },
      modal: {
        title: "添加新角色",
        component: addPage,
        data: {},
        show: false,
        close:this.search
      },
      modal1: {
        show: false,
        title: "编辑角色",
        component: null,
        data: {},
        close:this.search
      },
      modal2: {
        show: false,
        title: "查看权限",
        component: null,
        data: {}
      }
    };
  },
  created() {
    this.search();
  },
  methods: {
    addRule() {
      this.$uDialog(this.modal);
    },
    updateRole(row) {
      this.modal1.title = "编辑角色-" + row.display_name;
      this.modal1.component = updateVue;
      this.modal1.data = row;
      this.$uDialog(this.modal1);
    },
    search() {
      this.loading = true;
      roleList(this.conditions, res => {
        this.loading = false;
        this.data = res.data;
      });
    },
    destroy(id) {
      rolePostDel(
          id,
          res => {
            this.search();
          },
          err => {
            this.search()
          }
        );
    },
    allotPermission(data) {
      this.modal2.title = "查看角色权限-" + data.display_name;
      this.modal2.component = allotPermissionPage;
      data.isEdit = true;
      this.modal2.data = data;
      this.$uDialog(this.modal2);
    }
  }
};
</script>

<style lang="scss" scoped>
</style>
